<template>
  <div class="wangwanglist">
    <div class="card">
      <div class="flex row_bet col_center">
        <div class="card_title">近30天本小组服务费走势</div>
        <a-radio-group v-model="type" style="text-align: right" @change="statusChange">
          <a-radio-button :value="1">
            预估数据
          </a-radio-button>
          <a-radio-button :value="2">
            结算数据
          </a-radio-button>
        </a-radio-group>
      </div>
      <div class="chart">
        <v-chart :forceFit="true" :height="219" :data="data" :scale="scale" padding="auto">
          <v-tooltip/>
          <v-axis/>
          <v-stack-area
            position="addDate*price"
            color="l(90) 0:#4988f2 1:#ffffff"
            opacity="0.85"
            shape="smooth"
          ></v-stack-area>
        </v-chart>
      </div>
    </div>
    <div class="card" style="margin-top: 14px">
      <div class="card_title">组员详情数据</div>
      <div>
        <a-table
          :columns="columns"
          :rowKey="grounddata => grounddata.user"
          :dataSource="grounddata"
          :loading="loading"
          :pagination="false"
        >
          <div slot="index" slot-scope="text, row,index">
            <span
              class="index"
              :style="{
                backgroundColor:index<3? '#314659':'#f5f5f5',
                color:index<3? '#ffffff':'#101010',
              }">{{ index+1 }}</span>
          </div>
          <div slot="yester_add" slot-scope="text, row">
            <div>
              {{ (row.yester_add).toFixed(2) }}
            </div>
          </div>
          <div slot="before_add" slot-scope="text, row">
            <div>
              {{ (row.before_add).toFixed(2) }}
            </div>
          </div>
          <div slot="perGoals" slot-scope="text, row">
            <div>
              <a-progress
                :percent="parseInt((row.month_orderServiceFee/row.perGoals)*100)"
                size="small"
                status="active"
                :show-info="false"/>
            </div>
          </div>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  import { getgroupdetail, getgrouptime } from '@/api/rankApi'

  export default {
    name: 'Grouprank',
    data () {
      return {
        moment,
        type: 1,
        data: [],
        loading: false,
        isshow: false,
        scale: [
          {
            dataKey: 'price',
            min: 0
          },
          {
            dataKey: 'addDate',
            type: 'time',
            mask: 'YYYY-MM-DD'
          }],
        grounddata: [
          // {
          //   user: '从雪艳', // 组员昵称
          //   useTime: '2017-10-16', // 入职时间
          //   perGoals: '10000', // 目标
          //   before_orderServiceFee: '1539.28', // 前天预估服务费
          //   yester_orderServiceFee: '3112.94', // 昨天预估服务费
          //   max_before_day_orderServiceFee: '80.16', // 大前天预估服务费
          //   bz_orderServiceFee: '4732.38', // 本周预估服务费
          //   month_orderServiceFee: '4732.38', // 本月预估服务费
          //   lastMonth_orderServiceFee: '88394.22', // 上月月预估服务费
          //   month_cmServiceFee: '1953.95', // 本月结算总计
          //   lastMonth_cmServiceFee: '54212.73', // 上月结算总计
          //   yester_add: 1573.66, // 昨天预估增长
          //   before_add: 1459.12// 前天预估增长
          // }
        ],
        columns: [
          {
            title: '排名',
            align: 'center',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            title: '姓名',
            align: 'center',
            dataIndex: 'user',
            scopedSlots: { customRender: 'user' }
          },
          {
            title: '入职时间',
            align: 'center',
            dataIndex: 'useTime',
            scopedSlots: { customRender: 'useTime' }
          },
          {
            title: '前天',
            align: 'center',
            dataIndex: 'before_orderServiceFee',
            scopedSlots: { customRender: 'before_orderServiceFee' }
          }, {
            title: '昨天',
            align: 'center',
            dataIndex: 'yester_orderServiceFee',
            scopedSlots: { customRender: 'yester_orderServiceFee' }
          },
          {
            title: '昨天增长',
            align: 'center',
            dataIndex: 'yester_add',
            scopedSlots: { customRender: 'yester_add' }
          },
          {
            title: '前天增长',
            align: 'center',
            dataIndex: 'before_add',
            scopedSlots: { customRender: 'before_add' }
          },
          {
            title: '本周总计',
            align: 'center',
            dataIndex: 'bz_orderServiceFee',
            scopedSlots: { customRender: 'bz_orderServiceFee' }
          },
          {
            title: '本月预估',
            align: 'center',
            dataIndex: 'month_orderServiceFee',
            scopedSlots: { customRender: 'month_orderServiceFee' }
          },
          {
            title: '上月预估',
            align: 'center',
            dataIndex: 'lastMonth_orderServiceFee',
            scopedSlots: { customRender: 'lastMonth_orderServiceFee' }
          },
          {
            title: '本月结算',
            align: 'center',
            dataIndex: 'month_cmServiceFee',
            scopedSlots: { customRender: 'month_cmServiceFee' }
          },
          {
            title: '上月结算',
            align: 'center',
            dataIndex: 'lastMonth_cmServiceFee',
            scopedSlots: { customRender: 'lastMonth_cmServiceFee' }
          },
          {
            title: '目标进度',
            align: 'center',
            dataIndex: 'perGoals',
            scopedSlots: { customRender: 'perGoals' }
          }

        ]
      }
    },
    filters: {
      numFormat (input) {
        return input && input.toString()
          .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
      }
    },
    computed: {},
    created () {
      this.getgrouptime()
      this.getgroupdetail()
    },
    mounted () {
    },
    methods: {
      statusChange (e) {
        // console.log('radio checked', e.target.value)
        this.getgrouptime()
      },
      getgroupdetail () {
        getgroupdetail().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.grounddata = res.data
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getgrouptime () {
        getgrouptime({
          type: this.type
        }).then(res => {
          console.log(res)
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].price = Number(res.data[i].price)
          }
          this.data = res.data
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang='less' scoped>
  .wangwanglist {
    .card {
      padding: 14px 36px 26px 26px;

      .card_title {
        margin-bottom: 23px;
      }

      .chart {
        width: 100%;
        height: 219px;
      }

      .index {
        background-color: #f5f5f5;
        border-radius: 20px;
        display: inline-block;
        font-size: 12px;
        font-weight: 600;
        /*margin-right: 24px;*/
        height: 20px;
        line-height: 20px;
        width: 20px;
        text-align: center;
      }
    }

    .mainbox {
      /*background-color: #F8F8F9 !important;*/
      /*border-radius: 8px 8px 0px 0px;*/
      /*border-top-left-radius: 0px !important;*/

      .ranklist {
        border-radius: 8px;
        overflow-y: hidden;

        .rankli {
          text-align: center;
          flex: 1;

          .user {
            height: 44px;
            line-height: 44px;
            background-color: #F8F8F9;
            padding: 0 18px;
            color: #101010;
            font-weight: 600;
          }

          .total {
            height: 40px;
            line-height: 40px;
            background-color: #F8F8F9;
            color: #2396F9;
            padding: 0 18px;
          }

          .rdata {
            height: 33px;
            line-height: 33px;
            padding: 0 18px;
            color: #2396F9;
            border-bottom: 1px solid #F8F8F9;
          }
        }
      }

    }
  }
</style>
